<template>
  <div>
    <el-button
      v-for="(item, index) in data"
      :key="`${item[property.id]}${index}`"
      round
      :class="checkedValue.indexOf(item[property.id]) !== -1 ? 'active check-tabs' : 'check-tabs'"
      :disabled="disabled || !!item.disabled"
      @click="handleButtonClick(item)"
    >
      {{ item[property.name] }}
      <i v-if="item[property.count]">{{ '(' + item[property.count] + ')' }}</i>
    </el-button>
  </div>
</template>

<script>
import { getCheckedValue, isArray } from "@monkey.do/monkey";

export default {
  name: "SearchSelection",

  model: {
    prop: "value",
    event: "change",
  },

  props: {
    value: {
      type: [String, Number, Array],
      default: () => [],
    },
    /** 数据 */
    data: {
      type: Array,
      default: () => [],
    },
    property: {
      type: Object,
      default: () => ({
        id: "id",
        name: "name",
        count: "count",
      }),
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    wants: {
      type: String,
      default: "id",
    },
    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false,
    },
    /** 是否支持不选中 */
    noChecked: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      checkedValue: [],
    };
  },

  watch: {
    value: {
      handler: function(value) {
        if (value || value === 0 || value === "") { // TODO
          if (isArray(value)) {
            if (this.multiple) {
              this.checkedValue = value;
            } else {
              this.checkedValue = [value[0]];
            }
          } else {
            if (this.multiple) {
              this.checkedValue.push(value);
            } else {
              this.checkedValue = [value];
            }
          }
        }
      },
      immediate: true,
    },
  },

  methods: {
    handleButtonClick(button) {
      const id = button[this.property.id];
      let checkedValue = [...this.checkedValue];
      const index = checkedValue.indexOf(button[this.property.id]);

      // 必须选中一个
      if (!this.noChecked && checkedValue.length === 1 && checkedValue[0] === id) return;

      if (index === -1) {
        if (this.multiple) {
          checkedValue.push(id);
        } else {
          checkedValue = [id];
        }
      } else {
        checkedValue.splice(index, 1);
      }

      const data = this.data.filter(item => checkedValue.indexOf(item[this.property.id]) !== -1);
      const value = getCheckedValue(data, this.multiple, this.wants);

      this.$emit("update:value", value);
      this.$emit("change", value);
    },
  },

};
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/variables';

/deep/.el-button {
  border-radius: 0px;
  color: $text-color;
  outline: none;
  padding: 9px 25px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
  &:hover {
    color: #1890FF;
  }
  &.active {
    background: #0278dc;
    outline: none;
    box-shadow: none;
    color: #fff;
  }
}
.check-tabs{
    padding: 8px 13px;
    width: 84px;
    height: 30px;
    font-size: 12px;
    border: 0;
    background: #EFF3FB;
    border-radius: 4px;
    color: #666;
}
</style>
